<template>
  <view class="address-edit">
    <my-header title="编辑地址"></my-header>
    <my-content class="content" :default-padding-top="10">
      <view class="address_box">
        <view class="address_item">
          <view class="address_item_label">收件人</view>
          <input placeholder-style="color:#808080;font-weight:bold;font-size:30rpx" v-model="addressParams.username"
                 class="address_item_value" placeholder="请填写收货人名字" />
        </view>
        <view class="address_item">
          <view class="address_item_label">手机号码</view>
          <input placeholder-style="color:#808080;font-weight:bold;font-size:30rpx" v-model="addressParams.mobile"
                 class="address_item_value" placeholder="请填写收货人手机号码" />
        </view>
        <view class="address_item">
          <view class="address_item_label">所在地区</view>
          <view @click="openPicker" class="address_item_value" v-if="this.addressParams.city">{{ addressData }}</view>
          <view @click="openPicker" class="address_item_value none" v-else>{{ addressData }}</view>
          <my-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></my-selectDity>
        </view>
        <view class="address_item detail">
          <view class="address_item_label">详细地址</view>
          <textarea placeholder-style="color:#808080;font-weight:bold;font-size:30rpx" v-model="addressParams.detail"
                    class="address_item_value" auto-height placeholder="详细的地址,如道路,小区,门牌号等" />
        </view>
        <view class="address_item default">
          <view class="address_item_label">设为默认地址</view>
          <switch @change="changeStatus" checked v-if="addressParams.status" color="#967F00"
                  style="transform:scale(0.7)" />
          <switch @change="changeStatus" v-else color="#967F00" style="transform:scale(0.7)" />
        </view>
      </view>

      <view class="add_btn" v-if="complete" @click="submit()">保存地址</view>
      <view class="add_btn un_complete" v-else>保存地址</view>
    </my-content>

  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      addressParams: {
        id: 0,
        username: '',
        mobile: '',
        province: '',
        city: '',
        area: '',
        status: 0,
        detail: '',
      },
      show: false,
      addressData: '点击选择地区',
    }
  },
  onLoad(option) {
    this.addressParams.id = option.id
    this.getAddress()
  },
  onShow() {

  },
  computed: {
    complete() {
      return (this.addressParams.username && this.addressParams.mobile && this.addressParams.detail)
    },
  },

  methods: {
    //选中省市区
    onsetCity(e) {
      let data = e.detail.target.dataset
      let address = data.province + data.city + data.area
      this.show = false
      this.addressData = address
      this.addressParams.province = data.province
      this.addressParams.city = data.city
      this.addressParams.area = data.area
    },
    onhideShow() {
      this.show = false
    },
    openPicker() {
      this.show = true
    },
    changeStatus(e) {
      this.addressParams.status = e.detail.value
    },
    getAddress() {
      api.userAddress.show(this.addressParams.id).then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          this.addressParams = res.data
          this.addressData = this.addressParams.province + this.addressParams.city + this.addressParams.area
        }
      }).catch(error => {
        console.log(error)
      })
    },
    submit() {
      if (!this.addressParams.username) {
        this.show('请输入收件人')
        return
      }
      if (!this.addressParams.mobile) {
        this.show('请输入手机号')
        return
      }
      if (!this.addressParams.city) {
        this.show('请选择地址')
        return
      }
      if (!this.addressParams.detail) {
        this.show('请输入详细地址')
        return
      }
      uni.showLoading({
        title: '保存中',
      })
      api.userAddress.edit(this.addressParams.id, this.addressParams).then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          this.header(`/pages/address/index`)
        }
      }).catch(error => {
        console.log(error)
      })
    },
  },
}
</script>

<style lang="scss">
.address-edit {
  background-color: #141414;
  min-height: 100vh;
  height: 100%;
}

.content {

  .address_box {
    display: flex;
    flex-direction: column;
    /* padding-top: 20rpx; */
    background-color: #1F1F1F;
    color: white;
    margin: 10rpx 20rpx;

    .address_item {
      display: flex;

      align-items: center;
      margin: 0 20rpx;
      height: 100rpx;

      &:last-child {
        /* margin-top: 20rpx; */
      }

      &.detail {
        // padding-bottom: 100rpx;
      }

      .address_item_label {
        width: 180rpx;
        margin-right: 18rpx;
        margin-left: 18rpx;
      }

      &.default {
        justify-content: space-between;

        .address_item_label {
          width: 200rpx;
        }
      }

      .address_item_value {
        // color: #333;
        // font-weight: bold;
        color: white;
        text-align: right;
        flex: 1;
        margin-right: 12rpx;

        &.none {
          /* color:#ccc; */
          font-weight: bold;
          font-size: 30rpx
        }
      }

      .address_select {
        color: #999;
      }
    }
  }

  .add_btn {
    /* background-color: #A361F6; */
    background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
    background-size: 100% 100%;
    position: fixed;
    bottom: 50rpx;
    width: 700rpx;
    left: calc(50% - 350rpx);
    border-radius: 10rpx;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #fff;

    &.un_complete {
      background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-disable.png');
      background-size: 100% 100%;
      color: #fff;
    }
  }
}

</style>